<!--
wy 消息页面
描述：显示消息
最后修改时间：9.16/14:9
-->
<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>吃游网-消息通知</title>

    <link rel="stylesheet" href="css/quote/bootstrap.css">
    <link rel="stylesheet" href="css/head.css">
    <link rel="stylesheet" href="css/footer.css">
    <link rel="stylesheet" href="css/message.css">

    <script src="js/quote/jquery-3.4.1.js"></script>
    <script src="js/quote/hf.js"></script>
    <script src="js/quote/jquery.js"></script>
    <script src="js/quote/bootstrap.js"></script>
    <script src="js/custom.js"></script>

</head>
<body>
<div class="page-content background">
    <div class="container ">
        <div class="">
            <h3 style="margin: 22px 0">消息通知</h3>
        </div>
    </div>
    <div class="container">
        <div id="main" style="height: 550px;">
            <div class="mod-main mod-comm message-box">
                <form action="" id="queryMsgFrom" method="post">
                    <div class="mc">
                        <div class="mg-left" style="padding-top:0px">
                            <div class="ui-scrollbar-wrap"
                                 style="position: relative; overflow: hidden; width: 253px; height: 550px; z-index: 0;">
                                <div class="mg-noticelist"
                                     style="position: absolute; left: 0px; top: 0px; overflow: hidden;">
                                    <div class="ui-scrollbar-main">
                                        <ul>

                                            <li onclick="queryByType(1)" class="mg-types ">
    							        							<span class="mg-timg actimg">
        								<s id="unsubscribe_icon_1" class="hide"></s>
        								        							</span>
                                                <div class="mg-tcont">
                                                    <div class="mg-ttitle">
                                                        <div style="float:left;width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                                            <a href="javascript:void(0);" title="系统通知">
                                                               商家消息
                                                            </a>
                                                        </div>
                                                    </div>
                                                    <span class="mg-illus">
            								<div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:135px;float:left">
            								    											<font color="grey">无未读消息</font>
            								            								</div>
            							</span>
                                                </div>
                                            </li>
                                            <li onclick="queryByType(2)" class="mg-types ">
                                                <span class="mg-timg simg"><s id="unsubscribe_icon_2" class="hide"></s></span>
                                                <div class="mg-tcont">
                                                    <div class="mg-ttitle">
                                                        <div style="float:left;width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                                            <a href="javascript:void(0);" title="美食信息">美食信息</a>
                                                        </div>
                                                        <span class="mg-ttime"></span>
                                                    </div>
                                                    <span class="mg-illus">
            								<div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:135px;float:left">
            								    <font color="grey">无未读消息</font>
            								</div>
            							             </span>
                                                </div>
                                            </li>

                                            <li onclick="queryByType(3)" class="mg-types ">
    	                             	<span class="mg-timg runimg"><s id="unsubscribe_icon_3" class="hide"></s></span>
                                                <div class="mg-tcont">
                                                    <div class="mg-ttitle">
                                                        <div style="float:left;width:80px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;">
                                                            <a href="javascript:void(0);" title="订单信息">订单信息</a>
                                                        </div>
                                                        <span class="mg-ttime"></span>
                                                    </div>
                                                    <span class="mg-illus">
            								<div style="overflow:hidden;text-overflow:ellipsis;white-space:nowrap;width:135px;float:left">
            								       <font color="grey">无未读消息</font>
                                           </div>
            						             	</span>
                                                </div>
                                            </li>
                                        </ul>
                                    </div>
                                </div>
                                <div class="ui-scrollbar-bg"
                                     style="position: absolute; left: 247px; top: auto; width: 6px; z-index: 1; display: none;"></div>
                                <div class="ui-scrollbar-item3"
                                     style="position: absolute; left: 247px; top: 0px; width: 4px; z-index: 2; display: none;"></div>
                            </div>
                        </div>



                        <div id="store_info" class="mg-right" style="padding-bottom: 10px; height: 582px;background-color: white" >
                            <div class="mg-select">
                                <div class="mg-msgtitle">
                                    <input id="typeId" type="hidden" value="1">
                                    <input id="typeName" type="hidden" value="商家消息">
                                    <input id="unsubscribe" type="hidden" value="">商家消息
                                </div>
                            </div>
                            <div class="ui-scrollbar-wrap"
                                 style="position: relative; overflow: hidden; width: 600px; height: 535px; z-index: 0;">
                                <div class="mg-noticeshow"
                                     style=" left: 0px; top: 0px; overflow: hidden; padding-left:200px;">
                                    <div class="ui-scrollbar-main" style="margin-top:10px">
                                        <ul id="msg-node-54702046044" class="mg-coupon">
                                            <li id="storeMessage">


                                            </li>
                                        </ul>
                                      <!--  <div class="mg-more">
                                            <span>已经没有更多的消息了</span>
                                        </div>-->
                                        <br>

                                        <nav style="text-align: center">
                                            <ul class="pagination" id="storepage">

                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                            </div>

                        </div>




                        <div id="food_info" class="mg-right" style="padding-bottom: 10px; height: 582px;background-color: white;display: none" >
                            <div class="mg-select">
                                <div class="mg-msgtitle">
                                    <input id="typeId2" type="hidden" value="1">
                                    <input id="typeName2" type="hidden" value="商品信息">
                                    <input id="unsubscribe2" type="hidden" value="">我的关注
                                </div>
                            </div>
                            <div class="ui-scrollbar-wrap"
                                 style="position: relative; overflow: hidden; width: 600px; height: 535px; z-index: 0;">
                                <div class="mg-noticeshow"
                                     style=" left: 0px; top: 0px; overflow: hidden; padding-left:200px;">
                                    <div class="ui-scrollbar-main" style="margin-top:10px">
                                        <ul id="msg-node-5470204604412" class="mg-coupon">
                                            <li id="foodMessage">

                                            </li>
                                        </ul>

                                        <br>
                                        <nav style="text-align: center">
                                            <ul class="pagination" id="commpage">

                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>



                        <div id="order_info" class="mg-right" style="padding-bottom: 10px; height: 582px;background-color: white;display: none"  >
                            <div class="mg-select">
                                <div class="mg-msgtitle">
                                    <input id="typeId1" type="hidden" value="1">
                                    <input id="typeName1" type="hidden" value="系统通知">
                                    <input id="unsubscribe1" type="hidden" value="">订单通知
                                </div>
                            </div>
                            <div class="ui-scrollbar-wrap"
                                 style="position: relative; overflow: hidden; width: 600px; height: 535px; z-index: 0;">
                                <div class="mg-noticeshow"
                                     style=" left: 0px; top: 0px; overflow: hidden; padding-left:200px;">
                                    <div class="ui-scrollbar-main" style="margin-top:10px">
                                        <ul id="msg-node-547020460441" class="mg-coupon">
                                            <li id="orderMessage">


                                            </li>
                                        </ul>

                                        <br>
                                        <nav style="text-align: center">
                                            <ul class="pagination" id="orderPage">

                                            </ul>
                                        </nav>
                                    </div>
                                </div>
                            </div>
                        </div>





                    </div>
                </form>
            </div>
        </div>
    </div>
    <hr/>
</div>
</body>











<script>
    function queryByType(num) {
        if(num==1){
            $("#order_info").css("display", "none")
            $("#food_info").css("display", "none")
            $("#store_info").css("display", "")
        }else if(num==2){
            $("#order_info").css("display", "none")
            $("#food_info").css("display", "")
            $("#store_info").css("display", "none")

        } else {
            $("#order_info").css("display", "")
            $("#food_info").css("display", "none")
            $("#store_info").css("display", "none")
        }
    }

</script>

<!--获取当前的用户并展示关注的商家-->
<script>
    $.get("user/finduser", {}, function (data) {
        if (data.length > 0) {
            var user = data;
            //展示用户的商家收藏
            $.ajax({
                url: "/collection/storecollection",
                dataType: "json",
                data: "userId=" + user + "&currPage=1",
                success: function (data) {
                    //记录条数
                    var total1 = 0;
                    total1 = data.totalSize;
                    //页数
                    var pageNum = Math.ceil(total1 / 3);
                    //加载分页插件
                    var html = '';
                    for (var i = 1; i <= pageNum; i++) {
                        html += '<li><a href="javascript:void(0)" onclick="changeCurrPage2(' + i + ')">' + i + '</a></li>';
                    }
                    $('#storepage').html(html)
                    console.log(data)
                    $.each(data.dataList, function (i, dom) {
                        $('#storeMessage').append(`
                              <div class="mg-box">
                                                    <div class="mg-title">
                                                        <h4 style="float: left">${dom.storeName}</h4>
                                                        <s style="cursor:pointer"
                                                           onclick="logicDeleteMessage(54702046044)"></s>
                                                    </div>
                                                    <div class="mg-content clearfix">
                                                        <div>感谢您的关注 我们将竭诚为您服务</div>
                                                        <a target="_blank" onclick="templateClick(54702046044,35)"
                                                           href="storeInfo.html?storeId=${dom.storeId}"
                                                           class="mg-details">链接&nbsp;&gt;&nbsp;</a>
                                                    </div>
                                                </div>

                        `)
                    });
                }
            })
        }
    });
</script>
<script>
    var currPage2 = 1;
    function changeCurrPage2(page) {
        $('#storeMessage').html('');
        currPage2 = page;
        $.get("user/finduser", {}, function (data) {
            if (data.length > 0) {
                var user = data;
                //展示用户的商品收藏
                $.ajax({
                    url: "/collection/storecollection",
                    dataType: "json",
                    data: "userId=" + user + "&currPage="+currPage2,
                    success: function (data) {
                        $.each(data.dataList, function (i, dom) {
                            $('#storeMessage').append(`
                                 <div class="mg-box">
                                                    <div class="mg-title">
                                                        <h4 style="float: left">${dom.storeName}</h4>
                                                        <s style="cursor:pointer"
                                                           onclick="logicDeleteMessage(54702046044)"></s>
                                                    </div>
                                                    <div class="mg-content clearfix">
                                                        <div>感谢您的关注 我们将竭诚为您服务</div>
                                                        <a target="_blank" onclick="templateClick(54702046044,35)"
                                                           href="storeInfo.html?storeId=${dom.storeId}"
                                                           class="mg-details">链接&nbsp;&gt;&nbsp;</a>
                                                    </div>
                                                </div>
                        `)
                        });
                    }
                })
            }
        });
    }
</script>






<!--获取当前的用户并展示商品-->
<script>
    $.get("user/finduser", {}, function (data) {
        if (data.length > 0) {
            var user = data;
            //展示用户的商品收藏
            $.ajax({
                url: "/collection/commoditycollection1",
                dataType: "json",
                data: "userId=" + user + "&currPage=1",
                success: function (data) {
                    //记录条数
                    var total1 = 0;
                    total1 = data.totalSize;
                    //页数
                    var pageNum = Math.ceil(total1 / 10);
                    //加载分页插件
                    var html = '';
                    for (var i = 1; i <= pageNum; i++) {
                        html += '<li><a href="javascript:void(0)" onclick="changeCurrPage1(' + i + ')">' + i + '</a></li>';
                    }
                    $('#commpage').html(html)

                    $.each(data.dataList, function (i, dom) {
                        $('#foodMessage').append(
                            `
                          <div class="mg-box">
                                                    <div class="mg-title">
                                                        <h4 style="float: left">${dom.commodityName}</h4>
                                                        <s style="cursor:pointer"
                                                           onclick="logicDeleteMessage(54702046044)"></s>
                                                    </div>
                                                    <div class="mg-content clearfix">
                                                        <div>${dom.commodityDescribe}</div>
                                                        <a  onclick="templateClick(54702046044,35)"
                                                           href="commodity.html?commodityId=${dom.commodityId}"
                                                           class="mg-details">链接&nbsp;&gt;&nbsp;</a>
                                                    </div>
                                                </div>

                        `)
                    });
                }
            })
        }
    });
</script>
<!--设置分页，获取当前页数并展示商品-->
<script>
    var currPage = 1;
    function changeCurrPage1(page) {
        $('#foodMessage').html('');
        currPage = page;
        $.get("user/finduser", {}, function (data) {
            if (data.length > 0) {
                var user = data;
                //展示用户的商品收藏
                $.ajax({
                    url: "/collection/commoditycollection1",
                    dataType: "json",
                    data: "userId=" + user + "&currPage=" + currPage,
                    success: function (data) {
                        $.each(data.dataList, function (i, dom) {
                            $('#foodMessage').append(
                                `
                            <div class="mg-box">
                                                    <div class="mg-title">
                                                        <h4 style="float: left">${dom.commodityName}</h4>
                                                        <s style="cursor:pointer"
                                                           onclick="logicDeleteMessage(54702046044)"></s>
                                                    </div>
                                                    <div class="mg-content clearfix">
                                                        <div>${dom.commodityDescribe}</div>
                                                        <a target="_blank" onclick="templateClick(54702046044,35)"
                                                           href="commodity.html?commodityId=${dom.commodityId}"
                                                           class="mg-details">链接&nbsp;&gt;&nbsp;</a>
                                                    </div>
                                                </div>

                        `)
                        });
                    }
                })
            }
        });
    }
</script>




<!--获取当前的用户并展示d订单-->
<script>
    $.get("user/finduser", {}, function (data) {
        if (data.length > 0) {
            var user = data;
            //展示用户的商品收藏
            $.ajax({
                url: "/order/findOrderByUserIdAndPage1",
                dataType: "json",
                data: "userId=" + user + "&currPage=1",
                success: function (data) {
                    //记录条数
                    var total1 = 0;
                    total1 = data.totalSize;
                    //页数
                    var pageNum = Math.ceil(total1 / 3);
                    //加载分页插件
                    var html = '';
                    for (var i = 1; i <= pageNum; i++) {
                        html += '<li><a href="javascript:void(0)" onclick="changeCurrPage2(' + i + ')">' + i + '</a></li>';
                    }
                    $('#orderPage').html(html)
                     var time='';
                    $.each(data.dataList, function (i, dom) {
                        time = dom.orderHours
                        time = time.substring(0, 16)
                        time=time.replace("T"," ")
                        $('#orderMessage').append(
                            `
                          <div class="mg-box">
                                                    <div class="mg-title">
                                                      <h5 style="float: left">` + time + `</h5>
                                                        <s style="cursor:pointer"
                                                           onclick="logicDeleteMessage(54702046044)"></s>
                                                    </div>
                                                    <div class="mg-content clearfix">
                                                        <div>${dom.storeList[0].storeName}</div>
                                                        <a  onclick="templateClick(54702046044,35)"
                                                           href="orderdetail.html?orderId=${dom.orderId}&orderIsPay=${dom.orderIsPay}"
                                                           class="mg-details">详情&nbsp;&gt;&nbsp;</a>
                                                    </div>
                                                </div>

                        `)
                    });
                }
            })
        }
    });
</script>
<!--设置分页，获取当前页数并展示订单-->
<script>
    var currPage = 1;
    function changeCurrPage2(page) {
        $('#orderMessage').html('');
        currPage = page;
        $.get("user/finduser", {}, function (data) {
            if (data.length > 0) {
                var user = data;
                var time=''
                //展示用户的商品收藏
                $.ajax({
                    url: "/order/findOrderByUserIdAndPage1",
                    dataType: "json",
                    data: "userId=" + user + "&currPage=" + currPage,
                    success: function (data) {
                        $.each(data.dataList, function (i, dom) {
                            time = dom.orderHours
                            time = time.substring(0, 16)
                            time=time.replace("T"," ")

                            $('#orderMessage').append(
                                `
                            <div class="mg-box">
                                                    <div class="mg-title">
                                                        <h5 style="float: left">` + time + `</h5>
                                                        <s style="cursor:pointer"
                                                           onclick="logicDeleteMessage(54702046044)"></s>
                                                    </div>
                                                    <div class="mg-content clearfix">
                                                        <div>${dom.storeList[0].storeName}</div>
                                                        <a target="_blank" onclick="templateClick(54702046044,35)"
                                                           href="orderdetail.html?orderId=${dom.orderId}&orderIsPay=${dom.orderIsPay}"
                                                           class="mg-details">详情&nbsp;&gt;&nbsp;</a>
                                                    </div>
                                                </div>

                        `)
                        });
                    }
                })
            }
        });
    }
</script>





</html>